<template>
  <px-scrollbar v-if="!isMain && isView">
    <px-button style="margin: 16px 0" type="primary" icon="back" @click="backMainPage"> 返回 </px-button>
    <px-descriptions title="扩展信息" border>
      <px-descriptions-item width="120" label="设备厂家">
        {{ eqpDetailData.manufacturer }}
      </px-descriptions-item>
      <px-descriptions-item width="120" label="设备负责人">
        {{ eqpDetailData.principalName }}
      </px-descriptions-item>
      <px-descriptions-item width="120" label="出厂日期">
        {{ eqpDetailData.manufactureDate }}
      </px-descriptions-item>
      <px-descriptions-item width="120" label="质保结束日期">
        {{ eqpDetailData.warrantyEndDate }}
      </px-descriptions-item>
      <px-descriptions-item width="120" label="设备定值">
        {{ eqpDetailData.constantVal }}
      </px-descriptions-item>
      <px-descriptions-item width="120" label="设备描述">
        {{ eqpDetailData.description }}
      </px-descriptions-item>
    </px-descriptions>
    <px-descriptions title="模型设置" border style="margin-top: 20px">
      <px-descriptions-item width="120" label="关联3D模型">
        {{ eqpDetailData.model }}
      </px-descriptions-item>
    </px-descriptions>
    <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
  </px-scrollbar>
</template>
<script lang="ts" setup>
import CustomTabs from "@/components/Tabs/index.vue";
import { computed, reactive, toRefs, watch } from "vue";
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps({
  // 主页面/详情页面
  isMain: {
    type: Boolean,
    default: false
  },
  // 查看or新增/编辑
  isView: {
    type: Boolean,
    default: false
  },
  // 工具借用单id
  eqpId: {
    type: String,
    default() {
      return "";
    }
  }
});

const state = reactive<any>({
  eqpDetailData: [],
  activeName: "first",
  tabList: [
    {
      name: "first",
      label: "故障信息"
    },
    {
      name: "second",
      label: "维修结果"
    },
    {
      name: "third",
      label: "备件/工具"
    },
    {
      name: "forth",
      label: "维修资料"
    },
    {
      name: "fifth",
      label: "维修进度"
    }
  ]
});
const { activeName, eqpDetailData, tabList } = toRefs(state);

const handelTabSelected = selectName => {
  activeName.value = selectName;
};

// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);

// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    handelTabSelected("first");
  }
});
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
